@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-popup {
	position: fixed;
	z-index: @z-index-popup;
	width: @popup-width;
	max-width: @popup-max-width;

	&-position&-position--center {
		.@{wux-prefix}-popup {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.@{wux-prefix}-popup__content {
			border-radius: @border-radius-base;
		}

		.@{wux-prefix}-popup__hd {
			padding: @popup-hd-padding;
		}

		.@{wux-prefix}-popup__bd {
			padding: @popup-bd-padding;
		}

        .@{wux-prefix}-popup__ft:after {
            .setTopLine(@border-color-split);
        }
	}

	&-position&-position--top {
		.@{wux-prefix}-popup {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			max-width: 100%;
		}
	}

	&-position&-position--right {
		.@{wux-prefix}-popup {
			position: fixed;
			top: 0;
			right: 0;
			width: @popup-width;
			max-width: 100%;
			height: 100%;
			max-height: 100%;
		}
	}

	&-position&-position--bottom {
		.@{wux-prefix}-popup {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			max-width: 100%;
		}
	}

	&-position&-position--left {
		.@{wux-prefix}-popup {
			position: fixed;
			left: 0;
			top: 0;
			width: @popup-width;
			max-width: 100%;
			height: 100%;
			max-height: 100%;
		}
	}

    &-position&-position--is-iphonex &__content {
        padding-bottom: @safe-area-inset-bottom;
    }

	&__content {
		position: relative;
		background-color: @popup-content-bg;
		border: 0;
		background-clip: padding-box;
		height: 100%;
		text-align: center;
		overflow: hidden;
	}

	&__title {
		font-weight: 400;
		font-size: @popup-title-font-size;
        color: @heading-color;
	}

	&__bd {
		min-height: 40px;
		font-size: @popup-bd-font-size;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: @text-color-secondary;
	}

	&__ft {
		position: relative;
		line-height: 48px;
		font-size: @popup-title-font-size;
		display: flex;
	}

	&__close {
		border: 0;
		padding: 3px;
		background-color: transparent;
		outline: none;
		position: absolute;
		top: 6px;
		right: 6px;
		height: 21px;
		width: 21px;
	}

	&__close-x {
		display: inline-block;
		width: 15px;
		height: 15px;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888' fill-rule='evenodd'%3E%3Cpath d='M1.414 0l28.284 28.284-1.414 1.414L0 1.414z'/%3E%3Cpath d='M28.284 0L0 28.284l1.414 1.414L29.698 1.414z'/%3E%3C/g%3E%3C/svg%3E");
	}
}
